<template>

	<div class="body">
		<!-- <div class="header">
			<span>
				<img @click="returnGo" src="@/assets/homeimg/滑动左.png" />
				<span>课程详情</span>
			</span>
		</div> -->
		<div class="min" v-html="obj.content">
			<!-- <div class="img">
				<img :src="obj.logo_image" alt="">
			</div>
			<div class="middl">
				<div class="postion">
					<p class="plan">
						{{obj.name}}
					</p>
					<p class="matter">
						{{obj.description}}
					</p>
					<p class="time">开课日期：{{obj.begin_time_text}}</p>
				</div>
			</div>
			<div class="dah">
				<img src="../assets/homeimg/大标题.png" />
			</div>
			<div class="jsneirong">
				<div class="tese">
					<div class="tesebt">
						<img src="../assets/homeimg/标题1.png" />
					</div>
					<div class="tsnr">
						<div class="yinying">
							<img src="../assets/homeimg/01.png" alt="" />
							<p>影像</p>
							<p>听记</p>
						</div>
						<div class="tstext">
							<p>
								{{obj.description}}
							</p>
						</div>
					</div>
					<div class="tsnr">
						<div class="yinying">
							<img src="../assets/homeimg/04.png" alt="" />
							<p>影像</p>
							<p>听记</p>
						</div>
						<div class="tstext">
							<p>
								{{obj.description}}
							</p>
						</div>
					</div>
					<div class="tsnr">
						<div class="yinying">
							<img src="../assets/homeimg/03.png" alt="" />
							<p>影像</p>
							<p>听记</p>
						</div>
						<div class="tstext">
							<p>
								{{obj.description}}
							</p>
						</div>
					</div>
				</div>
				<div class="tstwo">
					<div class="tesebt">
						<img src="../assets/homeimg/标题2.png" alt="" />
					</div>
					<div class="tst-min">
						<div class="colo">丨丨丨丨丨</div>
						<div class="tmins">
							<div class="mins-img">
								<img :src="obj.teacher_image" />
							</div>
							<div class="tsttext">
								<div>
									<div class="xieti">
										<i>01</i>
										<i>精心专业</i>
									</div>
									<div class="tex">
										<p>
											每一节课程，背后都是教研团队多个流程，超过40小时得辛勤付出
										</p>
									</div>
								</div>
								<div>
									<div class="xieti">
										<i>02</i>
										<i>丰富有趣</i>
									</div>
									<div class="tex">
										<p>
											听说读写记算
										</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="teset">
					<div class="tesebt">
						<img src="../assets/homeimg/标题3.png" alt="" />
					</div>
					<div class="renqun">
						<div class="kuang">
							<div><img src="../assets/homeimg/课程一.png" /></div>
							<p>幼升小</p>
							<p>提升说话能力</p>
							<p>为幼升小升学做准备</p>
						</div>
						<div class="kuang">
							<div><img src="../assets/homeimg/课程一.png" /></div>
							<p>幼升小</p>
							<p>提升说话能力</p>
							<p>为幼升小升学做准备</p>
						</div>
					</div>
					<div class="renqun">
						<div class="kuang">
							<div><img src="../assets/homeimg/课程一.png" /></div>
							<p>幼升小</p>
							<p>提升说话能力</p>
							<p>为幼升小升学做准备</p>
						</div>
						<div class="kuang">
							<div><img src="../assets/homeimg/课程一.png" /></div>
							<p>幼升小</p>
							<p>提升说话能力</p>
							<p>为幼升小升学做准备</p>
						</div>
					</div>
				</div>
			</div> -->
		</div>
		<div class="Shop">
			<div class="ShopNow" v-if="!v_show" @click="showPopup(1)">
				<span>￥</span><span>{{obj.price}}</span><span>立即购买</span>
			</div>
			<div class="ShopNow" v-if="!v_show && obj.score != 0" @click="showPopup(2)">
				<span></span><span>{{obj.score}}</span><span>积分兑换</span>
			</div>
			<div class="ShopNow" v-if="v_show" @click="showPopup">
				<span>开始学习吧</span>
			</div>
		</div>
		<van-popup v-model="show" round closeable position="bottom"  >
			<div class="order" v-if="pay_type == 1">
				<div class="order-t">订单支付</div>
				<div class="order-name">
					<span>{{obj.name}}</span>
					<span>￥{{obj.price}}</span>
				</div>
				<div class="total">
					<span>合计</span>
					<span>￥{{obj.price}}</span>
				</div>
				<!-- <div class="btn">微信支付</div> -->
				<div class="btn" @click="pay">确定</div>
			</div>
			<div class="order" v-else>
				<div class="order-t">订单支付</div>
				<div class="order-name">
					<span>{{obj.name}}</span>
					<span>{{obj.score}}积分</span>
				</div>
				<div class="total">
					<span>合计</span>
					<span>{{obj.score}}积分</span>
				</div>
				<!-- <div class="btn">微信支付</div> -->
				<div class="btn" @click="pay">确定</div>
			</div>
		</van-popup>
	</div>
</template>
<script>
	import courseApi from '@/api/course'
	import { Toast , Dialog } from "vant";
	export default {
		data() {
			return {
				obj: {},//详情
				id: '',
				token: '',
				show: false,
				version: 1,//后台获取版本号
				version1: 1,//iOS传给我的版本号
				v_show: false,//是否审核
				type: 1,//1安卓
				pay_type:1,//积分支付2微信支付1
			}
		},
		mounted() {
			this.id = this.$route.query.id;
			window.gettoken = this.gettoken;
			window.getStatus = this.getStatus;
			window.try = this.try;
			this.getModel()
			// this.$store.commit('SAVE_TOKEN','09b13b21-df01-409f-94fd-a3ccf3283f8a')
			if(this.$route.query.token){
				this.$store.commit('SAVE_TOKEN',this.$route.query.token)
			}
			if(this.$route.query.version){
				this.version1 = this.$route.query.version
			}
			if(this.type == 2){
				this.getCheckVersion();
			}
			this.token = this.$store.state.token;
			this.getcoursedetail()
		},
		methods: {
			getModel(){
				const u = navigator.userAgent;
				const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
				if (isiOS) {
					this.type = 2;
				} else {
					this.type = 1;
					return "andriod";
				}
			},
			//获取审核版本
			getCheckVersion(){
				this.$http.post('/api/index/config').then(res => {
					console.log(res)
					this.version = res.data.check_version;
					if(this.version == this.version1){
						//审核
						this.v_show = true;
						this.createOrder();
					}else{
						this.v_show = false;
					}
				})
			},
			//生成审核订单
			createOrder(){
				this.$http.post('/api/course/createCheckOrder',{course_id:this.id}).then(res => {
					// console.log(res)
				})
			},
			try(){},
			//安卓和iOS登录后返回token
			gettoken(token) {
				// Toast(token)
				this.token = token;
				this.$store.commit('SAVE_TOKEN',this.$route.query.token)
				this.$router.go(0)
				// this.$router.push({path:`/kcxiangqing?id=${6}&token=${token}`})
			},
			//安卓和iOS支付后返回支付状态
			getStatus(status){
				if(status == '1'){
					Toast.success('支付成功');
					this.$router.push({path:'/group',query:{id:this.obj.id}})
					this.show = false;
				}else{
					Toast.fail('支付失败');
					this.show = true;
				}
			},
			returnGo() {
				// this.$router.go(-1);
				window.webkit.messageHandlers.pageBack_js_oc.postMessage([])
			},
			getcoursedetail() {
				this.$http.post('/api/course/detail',{id:this.id}).then(res => {
					// console.log(res)
					this.obj = res.data
				})
			},
			showPopup(val){
				if(this.v_show){
					window.webkit.messageHandlers.goReview_js.postMessage([this.id]);
					return
				}
				if (this.token == null || this.token == '' || this.token == 'undefined') {
					window.h5_android && window.h5_android.goLogin();
					window.webkit.messageHandlers.needLogin_js_oc.postMessage([])
					return;
				}
				this.pay_type = val;
				this.show = true;
				// console.log(this.show)
			},
			pay() {
				this.$http.post('/api/course/immately',{course_id: this.id,type:this.pay_type}).then(res => {
					console.log(res,'11111')
					if(res.code == 1){
						if(this.pay_type == 1){
							//微信支付
							this.pushWxpay(res)
						}else{
							//积分支付
							this.scorePay(res.data)
						}
					}
				})
			},
			//微信支付
			pushWxpay(res){
				this.$http.post('/addons/epay/api/submit',{order_sn:res.data}).then(res => {
					// console.log(res)
					window.h5_android && window.h5_android.pullPay(JSON.stringify(res.data));
					window.webkit.messageHandlers.pullUpWxpay_js_oc.postMessage([JSON.stringify(res.data)])
				})
			},
			//积分支付
			scorePay(sn){
				this.$http.post('/api/score/takeScoreOrderPay',{order_sn:sn}).then(res => {
					console.log(res)
					if(res.code == 1){
						Toast.success('支付成功');
						this.$router.push({path:'/group',query:{id:this.obj.id}})
						this.show = false;
					}else{
						Toast.fail('支付失败');
						this.show = true;
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped="scoped">
	.body {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 3.75rem;
	}

	.header {
		// background: chartreuse;
		position: fixed;
		top: 0;
		left: 0;
		background: #fff;
		text-align: center;
		height: 2.75rem;
		line-height: 2.75rem;
		padding-top: 1.25rem;
		font-size: 1.125rem;
		color: #333333;
		// margin-top: 0.3125rem;
		width: 100%;
		z-index: 99;

		img {
			width: 0.625rem;
			height: 1.125rem;
			position: absolute;
			left: 1rem;
			bottom: 0.75rem;
		}
	}
// 在scss文件中
	@supports(bottom:constant(safe-area-inset-top)) {

		// 如果存在底部安全区域
		.header {
			padding-top: constant(safe-area-inset-top);

		}

	}

	@supports(bottom:env(safe-area-inset-top)) {

		// 如果存在底部安全区域
		.header {
			padding-top: env(safe-area-inset-top);

		}

	}
	.min {
		// flex: 1;
		width: 100%;
		background: #fafafa;
		clear: both;
		// margin-top: 2.625rem;
	}

	.img {
		width: 100%;
		height: 11.875rem;
		border-bottom-left-radius: 8.25rem 1.25rem;
		border-bottom-right-radius: 8.25rem 1.25rem;
		overflow: hidden;

		img {
			width: 100%;
			height: 11.875rem;
		}
	}

	.middl {
		width: 21.5rem;
		margin: 0 auto;
		height: 6.875rem;
		position: relative;
		margin-bottom: 1.25rem;
	}

	.postion {
		width: 21.5rem;
		height: 11.875rem;
		// background: chocolate;
		background: #fff;
		position: absolute;
		top: -5rem;
		text-align: center;

		.plan {
			color: #333333;
			font-size: 1.125rem;
			height: 2.375rem;
			line-height: 2.375rem;
			margin-top: 1.25rem;
		}

		.matter {
			color: #666666;
			font-size: 0.875rem;
			width: 16.875rem;
			margin: 0 auto;
			padding-bottom: 1.25rem;
			border-bottom: 1px solid #d2d2d2;
		}

		.time {
			color: #ffb20a;
			font-size: 0.875rem;
			margin-top: 1.25rem;
		}
	}

	.dah {
		width: 14.375rem;
		height: 3.375rem;
		margin: 0 auto;

		img {
			width: 14.375rem;
			height: 3.375rem;
		}
	}

	.jsneirong {
		.tese {
			margin-top: 1.375rem;
			padding: 0 0.9375rem;

			// .tesebt {
			//   width: 11.25rem;
			//   height: 2.375rem;
			//   margin: 0 auto;
			//   img {
			//     width: 11.25rem;
			//     height: 2.375rem;
			//   }
			// }
			.tsnr {
				margin-top: 1rem;
				display: flex;
				position: relative;
				// margin-bottom: 1.75rem;
				height: 6.75rem;

				// overflow: hidden;
				.yinying {
					width: 5.625rem;
					height: 5.625rem;
					background: #ffb20a;
					border-radius: 0 0 0 1.875rem;
					margin-left: 4px;
					box-shadow: -5px 5px 2px #c0a05a;
					position: relative;

					img {
						width: 2.5rem;
						height: 1.125rem;
					}

					p {
						color: #fff;
						position: absolute;
						letter-spacing: 0.25rem;
						font-size: 1rem;
					}

					p:nth-of-type(1) {
						top: 1.625rem;
						right: 1.3125rem;
					}

					p:nth-of-type(2) {
						bottom: 1.5rem;
						right: 1.3125rem;
						margin-top: 0.3125rem;
					}
				}

				.tstext {
					margin-left: 0.75rem;
					position: absolute;
					top: 0.625rem;
					left: 4.5rem;
					background: #fff;
					width: 15.55rem;
					height: 4.625rem;
					padding: 0.625rem;
				}

				.tstext p {
					width: 15rem;
					// margin: 0.75rem;
					color: #666666;
					font-size: 0.75rem;
				}
			}
		}
	}

	.tesebt {
		width: 11.25rem;
		height: 2.375rem;
		margin: 0 auto;

		img {
			width: 11.25rem;
			height: 2.375rem;
			// margin-top: 0.5rem;
		}
	}

	.tst-min {
		width: 21.25rem;
		margin: 1rem auto;
		height: 12.1875rem;
		margin-bottom: 1.8rem;
	}

	.colo {
		height: 0.75rem;
		line-height: 0.8rem;
		background: #ffb30b;
		text-align: right;
		padding-right: 1.25rem;
	}

	.mins-img {
		width: 50%;
		height: 12.1875rem;
		float: left;

		img {
			width: 10.625rem;
			height: 12.1875rem;
		}
	}

	.tmins {
		overflow: hidden;
		box-shadow: 4px 4px 3px #ffb20a;
	}

	.tsttext {
		float: left;
		width: 50%;
	}

	.xieti {
		margin-top: 1.25rem;

		i:nth-of-type(1) {
			display: inline-block;
			width: 1.625rem;
			height: 1.625rem;
			background: #588bff;
			text-align: center;
			line-height: 1.625rem;
			border-radius: 50%;
			color: #fff;
		}

		i:nth-of-type(2) {
			color: #588bff;
			margin-left: 0.375rem;
		}
	}

	.tex {
		width: 7.5rem;
		margin-left: 2rem;
		font-size: 0.75rem;
		color: #666666;
	}
	.teset{
		padding-bottom: 4rem
	}
	.renqun {
		display: flex;
		width: 21.25rem;
		margin: 0 auto;
		margin-top: 0.875rem;
		justify-content: space-between;
		margin-bottom: 0.75rem;

		.kuang {
			width: 10.375rem;
			height: 9.75rem;
			text-align: center;
			background: #fff;

			img {
				width: 3.125rem;
				height: 3.125rem;
				border-radius: 50%;
				margin-top: 1.375rem;
			}

			p {
				color: #666666;
				font-size: 0.75rem;
				height: 1.25rem;
				line-height: 1.25rem;
			}

			p:nth-of-type(1) {
				color: #333333;
				font-size: 1rem;
			}
		}
	}

	//底部购买商品
	.Shop {
		// height: 4.75rem;
		position: fixed;
		width: 100%;
		background: #fff;
		bottom: 0;
		padding-bottom: 10px;
	}

	.ShopNow {
		// width: 21.5rem;
		height: 2.75rem;
		background: #ffb007;
		border-radius: 1.375rem;
		text-align: center;
		line-height: 2.75rem;
		margin: 0 auto;
		margin-top: 1rem;
		display: flex;
		justify-content: center;
		align-items: center;

		span:nth-of-type(1) {
			color: #e72222;
		}

		span:nth-of-type(2) {
			color: #e72222;
			font-size: 1.5rem;
		}

		span:nth-of-type(3) {
			color: #ffffff;
			font-size: 1rem;
		}
	}
	.order{
		width: 92vw;
		margin: 0 auto;
		.order-t{
			width: 100%;
			// height: 3.125rem;
			font-size: 0.9375rem;
			color: #333333;
			line-height:3.125rem;
			text-align: center;
		}
		.order-name{
			width: 100%;
			height: 2.5rem;
			line-height: 2.5rem;
			font-size: 0.9375rem;
			color: #333333;
			border-top: 1px solid #DEDEDE;
			border-bottom: 1px solid #DEDEDE;
			display: flex;
			justify-content: space-between;
			span:nth-of-type(2) {
				color: #e72222;
				font-size: 0.875rem;
			}
		}
		.total{
			width: 100%;
			height: 2.5rem;
			line-height: 2.5rem;
			font-size: 0.9375rem;
			color: #333333;
			display: flex;
			justify-content: space-between;
			span:nth-of-type(2) {
				color: #e72222;
				font-size: 0.875rem;
			}
		}
		.btn{
			width:100%;
			height:2.75rem;
			background:linear-gradient(90deg,rgba(255,207,62,1) 0%,rgba(255,176,7,1) 100%);
			border-radius:1.25rem;
			color: #FFFFFF;
			text-align: center;
			line-height: 2.75rem;
			margin-top: 0.625rem;
		}
	}
</style>
